<template>
	<view>
		<tn-nav-bar :isBack='true' :backTitle='" "' bottomShadow :alpha="alpha">我的团队
		</tn-nav-bar>
		<image src="/static/product/topbg.png" class="topbg" mode=""></image>
		
		<view :style="{paddingTop:'calc('+vuex_custom_bar_height+'px + 50rpx)'}" class="con">
			<view class="con__top">
				<image src="/static/my/teambg.png" class="con__top__bg" mode=""></image>
				<view class="con__top__lv">
					<image src="/static/my/lv.png" class="con__top__lv__bg" mode=""></image>
					<view class="con__top__lv__text" v-if="info.nowLevel">
						LV.{{info.nowLevel.id}}
					</view>
				</view>
				<view class="con__top__box" v-if="info.nowLevel">
					<view class="con__top__a">
						{{info.nowLevel.name}}
					</view>
					<view class="tn-flex tn-flex-col-center">
						<view class="con__top__b">
							 创收总金额(元）
						</view>
						<view class="tn-flex tn-flex-col-center" @click="iseye=!iseye">
							<text class="tn-icon-eye" style="font-size: 36rpx;" v-if="!iseye"></text>
							<text class="tn-icon-eye-hide" style="font-size: 36rpx;" v-else></text>
						</view>
					</view>
					<!-- <view class="con__top__c">
						{{info.returnTotalMoney}}
					</view> -->
					<view class="con__top__c" v-if="iseye">
						{{info.returnTotalMoney.toFixed(2)}}
					</view>
					<view class="con__top__c" v-else>
						***
					</view>
					<view class="" v-if="info.nowLevel.id==6">
						<view class="con__top__d">
							当前您已经是公司股东，享受公司分红权益。 
						</view>
						<view class="con__top__f">
							<view class="jd">
								<view class="ac" :style="{width:'100%'}">
						
								</view>
							</view>
						</view>
					</view>
					
					<view class="" v-else>
						<view class="" v-if="info.nextLevelCount">
							<view class="con__top__d">
								<view class="tn-flex tn-flex-col-center">
									当前已有<view class="con__top__e">
										{{info.totalTaoCan}}
									</view>套餐数，还需<view class="con__top__e">
										{{info.nextLevelCount-info.totalTaoCan}}
									</view> 套餐
								</view>
								<view class="con__top__g" style="color: #45C47B;" v-if="info.nextLevel">
									LV.{{info.nextLevel.id}}
								</view>
							</view>
							<view class="con__top__f">
								<view class="jd">
									<view class="ac" :style="{width:(info.totalTaoCan/info.nextLevelCount*100)+'%'}">
										<!-- {{info.nextLevelCount/info.totalUserCount*100}} -->
									</view>
								</view>
							</view>
						</view>
						<view class="" v-if="info.nowLevel.id!=1">
							<view class="con__top__d">
								<view class="tn-flex tn-flex-col-center" style="color: #FF644C;">
									当前助手人数<view class="con__top__e" style="background: #FF644C;">
										{{info.childLevelCount||0}}
									</view> 位.还需 <view class="con__top__e" style="background: #FF644C;">
										{{3-info.childLevelCount}}
									</view> 位
								</view>
								<view class="con__top__g" style="color: #45C47B;" v-if="info.nextLevel">
									LV.{{info.nextLevel.id}}
								</view>
							</view>
							<view class="con__top__f">
								<view class="jd">
									<view class="ac" style="background: #FF644C;" :style="{width:(info.childLevelCount/3*100)+'%'}">
							
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="con__box"
				:style="{height:'calc(100vh - 337rpx - 28rpx - 60rpx - '+vuex_custom_bar_height+'px - 50rpx)'}" style="position: relative;">
				<view class="" style="padding: 30rpx 0 0;">
					<tn-tabs :list="list" :current="current" :barWidth='36' itemWidth="50%" :barHeight='12'
						activeColor="#323232" inactiveColor="#868A8B" @change='change' :fontSize="28" name='name' bold
						:barStyle="{backgroundColor:'#45C47B'}" :height='80' v-if='list.length>0'></tn-tabs>
				</view>
				<loading v-if="loading"></loading>
				<scroll-view scroll-y="true" class="con__box__sc" v-else>
					<!-- 已消费 -->
					<view class="con__box__list" v-if='current==0'>
						<view class="con__box__list__item" v-for="(item,index) in info.moneyUser" :key="index">
							<image :src="URL(item.avatar)" class="con__box__list__item__tx" mode="aspectFill"></image>
							<view class="con__box__list__item__right">
								<view class="tn-flex tn-flex-col-center tn-flex-row-between">
									<view class="con__box__list__item__name">
										{{item.username}}
										<view class="con__box__list__item__lv">
											LV.{{item.level}}
										</view>
									</view>
									<view class="con__box__list__item__price">
										<text class="con__box__list__item__price__unit">￥</text>{{item.costmoney}}
									</view>
								</view>
								<view class="con__box__list__item__time">
									{{timeFormat(item.createtime,'yyyy.mm.dd hh:MM')}}
								</view>
							</view>
						</view>
					</view>
					<view class="con__box__list" v-if='current==1'>
						<view class="con__box__list__item tn-flex-row-between" v-for="(item,index) in info.unmoneyUser" :key="index">
							<view class="tn-flex tn-flex-col-center">
								<image :src="URL(item.avatar)" class="con__box__list__item__tx" mode="aspectFill"></image>
								</image>
								<view class="con__box__list__item__right" style="width: fit-content;">
									<view class="tn-flex tn-flex-col-center">
										<view class="con__box__list__item__name">
											{{item.username}}
											<view class="con__box__list__item__lv">
												LV.{{item.level}}
											</view>
										</view>
									</view>
									<view class="con__box__list__item__time">
										{{timeFormat(item.createtime,'yyyy.mm.dd hh:MM')}}
									</view>
								</view>
							</view>
							<view class="con__box__list__item__price">
								{{item.mobile}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import user from '@/api/_user.js'
	export default {
		data() {
			return {
				alpha: true,
				list: [],
				current: 0,
				info: {},
				type:1,
				loading:true,
				iseye:false,
			};
		},
		methods: {
			change(index) {
				this.current = index;
				this.type = this.list[index].type
				this.getlist()
			},
			getlist() {
				this.loading=true
				user.myTeam({
					type: this.type
				}).then(res => {
					if (res.data.code == 1) {
						this.info=res.data.data
						this.list = [
							{
								name: '已消费人数('+res.data.data.moneyUserCount+')',
								type: 1
							}, {
								name: '未消费人数('+res.data.data.unMoneyUserCount+')',
								type: 2
							}
						]
						this.loading=false
					}
				})
			}
		},
		onLoad() {
			this.getlist()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F4F4;
	}

	.con {
		padding: 28rpx;

		&__top {
			width: 694rpx;
			height: 337rpx;
			position: relative;

			&__bg {
				position: absolute;
				width: 694rpx;
				height: 337rpx;
				top: 0;
				left: 0;
			}

			&__lv {
				width: 190rpx;
				height: 216rpx;
				position: absolute;
				top: -19rpx;
				right: 62rpx;

				&__bg {
					width: 190rpx;
					height: 216rpx;
					position: absolute;
					top: 0;
					right: 0;
				}

				&__text {
					font-family: AlimamaShuHeiTi;
					font-weight: bold;
					font-size: 27rpx;
					color: #FFFFFF;
					line-height: 20rpx;
					width: 190rpx;
					text-align: center;
					position: absolute;
					bottom: 27rpx;
					left: 0;
				}
			}

			&__box {
				position: relative;

			}

			&__a {
				font-family: PingFang SC;
				font-weight: 800;
				font-size: 40rpx;
				color: #010101;
				line-height: 39rpx;
				padding: 44rpx 0 22rpx 43rpx;
			}

			&__b {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 20rpx;
				color: #767A7B;
				line-height: 20rpx;
				padding-left: 41rpx;
			}

			&__c {
				font-family: DIN Next LT Pro;
				font-weight: bold;
				font-size: 48rpx;
				color: #FF644C;
				line-height: 34rpx;
				padding: 20rpx 0 20rpx 44rpx;
			}

			&__d {
				font-family: AlimamaFangYuanTiVF;
				font-weight: 500;
				font-size: 24rpx;
				color: #45C47B;
				line-height: 24rpx;
				padding: 0 38rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			&__e {
				padding: 0 8rpx;
				line-height: 32rpx;
				background: #45C47B;
				border-radius: 10rpx;
				font-family: DIN Next LT Pro;
				font-weight: bold;
				font-size: 30rpx;
				color: #EFFAF3;
				margin: 0 2rpx;
			}

			&__g {
				font-family: AlimamaShuHeiTi;
				font-weight: bold;
				font-size: 27rpx;
				color: #45C47B;
				line-height: 20rpx;
			}

			&__f {
				padding: 10rpx 38rpx 20rpx;

				.jd {
					height: 14rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 3rpx 0rpx rgba(69, 196, 123, 0.09);
					border-radius: 7rpx;

					.ac {
						height: 14rpx;
						background: linear-gradient(98deg, #45C47B, #50E48E);
						border-radius: 7rpx;
					}
				}
			}
		}

		&__box {
			margin-top: 28rpx;
			background: #FFFFFF;
			border-radius: 30rpx;

			&__sc {
				height: calc(100% - 140rpx);
				padding-bottom: 40rpx;
			}

			&__list {

				&__item {
					padding: 40rpx 30rpx 0 30rpx;
					display: flex;
					align-items: center;

					&__tx {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						margin-right: 24rpx;
					}

					&__right {
						display: flex;
						flex-direction: column;
						justify-content: center;
						width: 506rpx;
					}

					&__name {
						font-family: PingFang SC;
						font-weight: 800;
						font-size: 27rpx;
						color: #181818;
						line-height: 27rpx;
						display: flex;
						align-items: center;

					}

					&__lv {
						padding: 0 13rpx 0 28rpx;
						line-height: 28rpx;
						background: rgba(91, 130, 222, 0.2);
						border-radius: 14rpx;
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 18rpx;
						color: #517AD1;
						line-height: 28rpx;
						margin-left: 18rpx;
					}

					&__price {
						font-family: DINNextLTPro-Bold;
						font-weight: 800;
						font-size: 34rpx;
						color: #FF4D30;
						line-height: 26rpx;

						&__unit {
							font-size: 24rpx;
							font-family: PingFang-SC-Heavy;
						}
					}

					&__time {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #616161;
						line-height: 24rpx;
						opacity: 0.8;
						margin-top: 17rpx;
					}
				}
			}
		}
	}
</style>